<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 
         * keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防⽌重复渲染 DOM
         * 包裹动态组件时，会缓存不活动的组件实例，⽽不是销毁它们 跳过创建和挂载过程，极大提升性能
         * 
         * <keep-alive>
                <component :is="view"></component>
            </keep-alive>

            <keep-alive include="a,b">
            /或者/ 
            <keep-alive include="[a,b]">
                <component :is="view"></component>
            </keep-alive>

            在路由中设置 keepAlive 属性判断是否需要缓存
            {
            path: 'list',
            name: 'itemList', // 列表⻚
            component (resolve) {
                require(['@/pages/item/list'], resolve)
            },
            meta: {
                keepAlive: true,
            title: '列表⻚'
            }
            }

            
         * **/ 

        // 接上面
        // <div id="app" class='wrapper'>
        //     <keep-alive>
        //     <!-- 需要缓存的视图组件 -->
        //     <router-view v-if="$route.meta.keepAlive"></router-view>
        //     </keep-alive>
        //     <!-- 不需要缓存的视图组件 -->
        //     <router-view v-if="!$route.meta.keepAlive"></router-view>
        // </div>
    </script>
</body>
</html>